<template>
  <div class="topology-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <el-input v-model="searchKeyword" placeholder="输入节点名称" size="small" style="width: 220px;" />
          <el-button type="primary" icon="Search" @click="searchNode">搜索</el-button>
          <el-button type="primary" icon="Download" @click="exportImage">导出图片</el-button>
        </div>
      </template>

      <div id="topology-chart" style="height: 600px;"></div>
    </el-card>

    <!-- 节点高亮弹窗 -->
    <el-dialog v-model="nodeDialogVisible" title="节点详情" width="400px">
      <el-form label-width="120px">
        <el-form-item label="节点类型">
          <el-input v-model="selectedNode.type" readonly />
        </el-form-item>
        <el-form-item label="节点名称">
          <el-input v-model="selectedNode.name" readonly />
        </el-form-item>
        <el-form-item label="节点ID">
          <el-input v-model="selectedNode.id" readonly />
        </el-form-item>
        <el-form-item label="节点状态">
          <el-input v-model="selectedNode.status" readonly />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="selectedNode.creationTime" readonly />
        </el-form-item>
        <el-form-item label="最后维护时间">
          <el-input v-model="selectedNode.lastMaintenanceTime" readonly />
        </el-form-item>
        <el-form-item label="节点描述">
          <el-input v-model="selectedNode.description" readonly />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="nodeDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 模拟数据
const searchKeyword = ref('')
const nodeDialogVisible = ref(false)
const selectedNode = ref({
  id: '',
  name: '',
  type: '',
  status: '',
  creationTime: '',
  lastMaintenanceTime: '',
  description: ''
})

const nodes = [
  { id: 'warehouse1', name: '仓库A', type: '仓库', status: '正常', creationTime: '2024-01-01', lastMaintenanceTime: '2024-03-01', description: '主要仓库' },
  { id: 'zone1', name: '分区A1', type: '分区', status: '正常', creationTime: '2024-02-01', lastMaintenanceTime: '2024-03-15', description: '常温存储区' },
  { id: 'zone2', name: '分区A2', type: '分区', status: '故障', creationTime: '2024-03-01', lastMaintenanceTime: '2024-04-05', description: '温控存储区' },
  { id: 'slot1', name: '储位A1-1', type: '储位', status: '正常', creationTime: '2024-03-10', lastMaintenanceTime: '2024-04-10', description: '放置电池' },
  { id: 'slot2', name: '储位A1-2', type: '储位', status: '正常', creationTime: '2024-03-12', lastMaintenanceTime: '2024-04-12', description: '放置灯具' },
  { id: 'sensor1', name: '温湿度传感器A1-1', type: '设备', status: '正常', creationTime: '2024-03-01', lastMaintenanceTime: '2024-03-15', description: '测量温湿度' },
  { id: 'sensor2', name: '温湿度传感器A1-2', type: '设备', status: '故障', creationTime: '2024-03-02', lastMaintenanceTime: '2024-03-20', description: '备用传感器' },
  { id: 'warehouse2', name: '仓库B', type: '仓库', status: '正常', creationTime: '2024-02-15', lastMaintenanceTime: '2024-03-10', description: '备件仓库' },
  { id: 'zone3', name: '分区B1', type: '分区', status: '正常', creationTime: '2024-03-10', lastMaintenanceTime: '2024-04-10', description: '危险品存储区' },
  { id: 'zone4', name: '分区B2', type: '分区', status: '维护中', creationTime: '2024-04-01', lastMaintenanceTime: '2024-04-05', description: '待开通区域' },
  { id: 'slot3', name: '储位B1-1', type: '储位', status: '正常', creationTime: '2024-03-12', lastMaintenanceTime: '2024-04-12', description: '存储设备' },
  { id: 'slot4', name: '储位B1-2', type: '储位', status: '维护中', creationTime: '2024-03-18', lastMaintenanceTime: '2024-04-05', description: '存储工具' },
  { id: 'sensor3', name: '温湿度传感器B1-1', type: '设备', status: '故障', creationTime: '2024-03-05', lastMaintenanceTime: '2024-04-03', description: '传感器故障' },
  { id: 'sensor4', name: '温湿度传感器B1-2', type: '设备', status: '正常', creationTime: '2024-03-07', lastMaintenanceTime: '2024-04-08', description: '备用传感器' }
]

const links = [
  { source: 'warehouse1', target: 'zone1' },
  { source: 'warehouse1', target: 'zone2' },
  { source: 'zone1', target: 'slot1' },
  { source: 'zone1', target: 'slot2' },
  { source: 'slot1', target: 'sensor1' },
  { source: 'slot2', target: 'sensor2' },
  { source: 'warehouse2', target: 'zone3' },
  { source: 'warehouse2', target: 'zone4' },
  { source: 'zone3', target: 'slot3' },
  { source: 'zone3', target: 'slot4' },
  { source: 'slot3', target: 'sensor3' },
  { source: 'slot4', target: 'sensor4' }
]

const searchNode = () => {
  const node = nodes.find(n => n.name.includes(searchKeyword.value))
  if (node) {
    highlightNode(node)
  }
}

const highlightNode = (node: any) => {
  selectedNode.value = { ...node }
  nodeDialogVisible.value = true
}

// 初始化图表
onMounted(() => {
  const chart = echarts.init(document.getElementById('topology-chart') as HTMLElement)

  const option = {
    tooltip: {},
    animation: true,
    series: [{
      type: 'graph',
      layout: 'force',
      data: nodes.map(node => ({
        ...node,
        symbolSize: node.type === '仓库' ? 80 : 50,
        itemStyle: {
          color: node.type === '仓库' ? '#FF5722' : node.type === '分区' ? '#4CAF50' : '#2196F3'
        }
      })),
      links: links,
      roam: true,
      force: {
        repulsion: 200,
        gravity: 0.1,
        edgeLength: 50
      },
      label: {
        show: true,
        position: 'right',
        formatter: '{b}'
      }
    }]
  }

  chart.setOption(option)
  // 添加鼠标悬停事件监听
  chart.on('mouseover', (params: any) => {
    if (params.seriesType === 'graph') {
      const node = nodes.find(n => n.id === params.data.id)
      if (node) {
        selectedNode.value = { ...node }
        nodeDialogVisible.value = true
      }
    }
  })
})

// 导出图片功能
const exportImage = () => {
  const chart = echarts.getInstanceByDom(document.getElementById('topology-chart') as HTMLElement)
  if (chart) {
    const image = chart.getDataURL({
      type: 'png',
      pixelRatio: 2,
      backgroundColor: '#fff'
    })

    const link = document.createElement('a')
    link.href = image
    link.download = 'topology-graph.png'
    link.click()
  } else {
    console.error('Chart instance is not initialized.')
  }
}
</script>

<style scoped>
.topology-container {
  padding: 20px;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 10px; /* 添加元素间距 */
}

/* 调整按钮间距 */
.el-button + .el-button {
  margin-left: 10px;
}


</style>
